<template>
  <VueDraggable
    class="flex flex-col gap-2 m-auto bg-gray-500/5 rounded overflow-auto"
    v-model="layoutCompList"
    :animation="150"
    ghostClass="ghost"
    :group="{ name: 'people', pull: 'clone', put: false }"
    :sort="false"
    :clone="clone"
  >
    <div
      v-for="item in layoutCompList"
      :key="item.flag"
      class="cursor-move h-30 bg-gray-500/5 rounded p-3"
    >
      <div>{{ item.text }}</div>
    </div>
  </VueDraggable>
</template>

<script setup lang="ts">
import { useDesignerStore } from '@/stores/designerStore'
import { VueDraggable } from 'vue-draggable-plus'
import { v4 as uuidv4 } from 'uuid'

const designerStore = useDesignerStore()
const { updateCompInfoToShow, recordCurrentAddCompInstanceId } = designerStore
const layoutCompList = ref<DesignComp[]>([
  {
    text: '文本组件',
    type: 'basic',
    flag: 'TextComp',
    id: 'TextComp',
    configData: {}
  }
])

function buildCompInstanceId(compFlag: string) {
  const compInstanceId = `${compFlag}-design-${uuidv4()}`
  return compInstanceId
}
function clone(element: DesignComp) {
  const children: DesignComp[] = []
  const flag = element.flag
  const compInstanceId = buildCompInstanceId(flag)
  const configData: Record<string, any> = {}
  if (flag === 'TextComp') {
    configData.content = '文本内容'
  }
  const designCompInfo: DesignComp = {
    text: element.text,
    type: element.type,
    flag,
    id: buildCompInstanceId(element.flag),
    configData,
    children: children,
    showToolBtn: true
  }
  updateCompInfoToShow(designCompInfo)
  window.requestAnimationFrame(() => {
    nextTick(() => {
      recordCurrentAddCompInstanceId(compInstanceId)
    })
  })
  return designCompInfo
}
</script>

<style scoped></style>
